<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // Promise的基本使用
    // 创建Promise实例
    // 在这个Promise实例中传入一个参数, 这个参数是一个函数
    // 这个传入的函数又包含两个参数, 分别是 resolve, 和 reject
    // 这两个参数又分别是两个函数
    // resolve会在异步操作成功后调用
    // reject会在异步操作失败后调用
    // 在调用resolve函数后, 此时, 将会在then中进行回调
    // 在调用reject函数后, 此时, 将会在catch中进行回调
    // then中也要传入一个参数, 这个参数是一个函数, 这个函数将会在resolve函数调用后进入
    // catch中也是要传入一个参数, 这个参数也是一个函数, 这个函数将会在reject函数调用后进入

    new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("你好你好")
          reject("错误错误")
        }, 2000)
      })
      .then((data) => {
        console.log(data);
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("再见再见")
            reject("错误错误")
          }, 2000)
        })
      })
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      })

    // 其实可以简单理解为
    new Promise((resolve, reject) => {
        // 执行异步操作
        // 异步操作成功后调用
        resolve(data) // data为操作成功后传入的数据
        // 异步操作失败后调用
        reject(err) // err为操作失败后传入的错误信息
      })
      .then((data) => {
        // 调用resolve后会进入这个函数中进行下面的操作
        // 这个函数中的data是由resolve中传过来的data
      })
      .catch((err) => {
        // 调用reject后会进入这个函数中进行下面的操作
        // 这个函数中的err错误信息是从reject中传过来的err
      })
  </script>
</body>

</html>